<template>
  <div class="quick-search">
    <el-input
      v-model="searchText"
      placeholder="快速搜索包裹单号、收件人姓名或手机号..."
      :prefix-icon="Search"
      clearable
      @input="handleInput"
      @clear="handleClear"
      class="search-input"
    >
      <template #append>
        <el-button :icon="Search" @click="handleSearch" />
      </template>
    </el-input>
    
    <!-- 搜索建议 -->
    <div v-if="showSuggestions && suggestions.length > 0" class="search-suggestions">
      <div
        v-for="(item, index) in suggestions"
        :key="index"
        class="suggestion-item"
        @click="handleSelectSuggestion(item)"
      >
        <div class="suggestion-main">{{ item.text }}</div>
        <div class="suggestion-type">{{ item.type }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { debounce } from '@/utils'

const props = defineProps({
  packageList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['search'])

const searchText = ref('')
const showSuggestions = ref(false)

// 搜索建议
const suggestions = computed(() => {
  if (!searchText.value || searchText.value.length < 2) {
    return []
  }

  const text = searchText.value.toLowerCase()
  const results = []

  // 搜索包裹单号
  props.packageList.forEach(item => {
    if (item.packageNo && item.packageNo.toLowerCase().includes(text)) {
      results.push({
        text: item.packageNo,
        type: '包裹单号',
        value: item.packageNo,
        field: 'packageNo'
      })
    }
    
    // 搜索收件人姓名
    if (item.recipientName && item.recipientName.toLowerCase().includes(text)) {
      results.push({
        text: item.recipientName,
        type: '收件人',
        value: item.recipientName,
        field: 'recipientName'
      })
    }
    
    // 搜索手机号
    if (item.recipientPhone && item.recipientPhone.includes(text)) {
      results.push({
        text: item.recipientPhone,
        type: '手机号',
        value: item.recipientPhone,
        field: 'recipientPhone'
      })
    }
  })

  // 去重并限制数量
  const unique = results.filter((item, index, self) => 
    index === self.findIndex(t => t.text === item.text && t.type === item.type)
  )
  
  return unique.slice(0, 8)
})

const handleInput = debounce((value) => {
  showSuggestions.value = value && value.length >= 2
}, 200)

const handleSearch = () => {
  showSuggestions.value = false
  emit('search', searchText.value)
}

const handleClear = () => {
  showSuggestions.value = false
  emit('search', '')
}

const handleSelectSuggestion = (item) => {
  searchText.value = item.text
  showSuggestions.value = false
  emit('search', item.text, item.field)
}

// 点击外部关闭建议
const handleClickOutside = (event) => {
  if (!event.target.closest('.quick-search')) {
    showSuggestions.value = false
  }
}

// 监听键盘事件
const handleKeydown = (event) => {
  if (event.key === 'Enter') {
    handleSearch()
  } else if (event.key === 'Escape') {
    showSuggestions.value = false
  }
}

// 生命周期
document.addEventListener('click', handleClickOutside)
document.addEventListener('keydown', handleKeydown)
</script>

<style lang="scss" scoped>
.quick-search {
  position: relative;
  margin-bottom: 16px;

  .search-input {
    width: 100%;
  }

  .search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;

    .suggestion-item {
      padding: 12px 16px;
      cursor: pointer;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: #f5f5f5;
      }

      .suggestion-main {
        font-size: 14px;
        color: #333;
      }

      .suggestion-type {
        font-size: 12px;
        color: #999;
        background: #f0f0f0;
        padding: 2px 6px;
        border-radius: 2px;
      }
    }
  }
}
</style>